<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_goods.rushList }}</view>
				<view></view>
			</view>

			<!-- 限时秒杀 -->
			<view v-if="rushTime" style="padding: 0 40rpx 20rpx;">
				<view class="rush-container flex-center-between">
					<view v-for="(item, index) in tabs" :key="index" :class="[
						'flex-center u-f-32 u-lh-38 font-bold',
						item.key,
						`rush-item${item.key === tabActive ? '-active' : '' }`]" :style="{
						color: tabActive !== item.key ? (item.key === 'rushing' ? '#FC2642' : '#070707') : '#FFFFFF'
					}" @click="changeTabKey(index, item.key)">
						<view v-if="item.key !== 'rushing'">{{ lang_shop.startingUp[0] + rushTime + lang_shop.startingUp[1] }}</view>
						<view v-else>{{ lang_shop[item.labelKey] }}</view>
					</view>

					<view class="rush-item-bg" :style="{
						left: tabActive === 'rushing' ? '40rpx' : '364rpx',
					}"></view>
				</view>
			</view>

			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>

		<!-- 列表 -->
		
		<view class="u-p-t-6">
			<!-- 列表 -->
			<swiper :style="`height: calc(100vh - ${ rushTime ? 214 : 104 }rpx - var(--status-bar-height))`" :current="tabIndex"
				@change="tabIndex = $event.detail.current">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<rush-list ref="mescrollItem" :i="index" :index="tabIndex" :tab-active="tabActive"></rush-list>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { goodsLastFirstKillTimeLater } from '@/api/user/goods.js'
	import RushList from './components/rush-list.vue'

	export default {
		components: { RushList },
		data() {
			// 初始化抢购导航
			return {
				tabs: [{
				key: 'rushing',
				label: '疯抢中',
			}],
				tabActive: 'rushing',
				tabIndex: 0,
				rushTime: '',
				
				dataList: []
			}
		},
		watch: {
			tabIndex: {
				handler(v) {
					this.tabActive = this.tabs[this.tabIndex].key
				},
				deep: true,
				immediate: true
			}
		},
		onLoad({
			rushActive
		}) {
			this.tabActive = rushActive || 'rushing'
			this.initGoodsTime()
		},
		methods: {
			// tab改变后
			changeTabKey(index, key) {
				this.tabIndex = index
				this.tabActive = key
			},
			// 初始化开售时间
			initGoodsTime() {
				goodsLastFirstKillTimeLater({}).then(result => {
					this.rushTime = result
					if (this.rushTime) {
						this.tabs = [
							{ key: 'rushing', label: '疯抢中', },
							{ key: 'beRush', label: '即将开抢' },
						]
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.rush {
		&-container {
			padding: 24rpx 66rpx 22rpx 86rpx;
			height: 90rpx;
			border: 2rpx solid #BEBEBE;
			border-radius: 100rpx;
			transition: .3s all;
		}

		&-item {
			color: #FFFFFF;

			&-active {
				@extend .rush-item;
				position: relative;
				top: 0;
				left: 0;
				color: #FFFFFF;
			}

			&-bg {
				position: absolute;
				bottom: 22rpx;
				z-index: -1;
				width: 344rpx;
				height: 90rpx;
				color: #FFFFFF;
				background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
				box-shadow: 0 4rpx 8rpx 0rpx rgba(252, 31, 63, 0.31);
				border-radius: 100rpx;
				transition: .3s all;
			}
		}
	}
</style>
